<template>
	<view class="conter">
		<view class="box">
			<view class="sfntio_box">
				<view>时间</view>
				<view style="width: 120rpx; padding-left: 45rpx; text-align:center;">数量</view>
				<view>状态</view>
			</view>
			<u-list height="1200rpx" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in meetingRecordList" :key="index">
					<!-- 没有点击前 -->
					<view @click="goGuild(item)" class="list_box" v-if="item.isLook == false">
						<view class="name">{{ item.createTime }}</view>
						<view class="number">{{ item.sumValue }}</view>
					<view style="display: flex; align-items:center;">
						<view class="price">{{ item.stateName }}</view>
						<view class="doudou"></view>
					</view>
					</view>
					<!-- 点击后 -->
					<view @click="goGuild(item)" class="list_box" style="border: 1rpx solid #2f2f2f" v-if="item.isLook == true">
						<view class="name" style="color: #9e9e9e">{{ item.createTime }}</view>
						<view class="number" style="color: #9e9e9e">{{ item.sumValue }}</view>
						
						<view style="display: flex; align-items:center;">
							<view class="price">{{ item.stateName }}</view>
							<view class="doudou" style="background-color: #1b1b1b" ></view>
						</view>
						
					</view>
				</u-list-item>
				<view style="position: absolute" v-if="meetingRecordList.length == 0">
					<image style="width: 280rpx; height: 280rpx; margin: 275rpx 220rpx 0" src="../../static/images/fighting.gif" mode=""></image>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
import config from '@/config.js';
import { meetingHallRecord, meetingHallRecordDetail } from '@/api/union/union.js';
export default {
	data() {
		return {
			imgUrl: config.gillUrl,
			list: [
				{
					name: '未处理'
				},
				{
					name: '已处理'
				}
			],
			current: 0,
			page: 1,
			size: 10,
			totalSize: 0,
			meetingRecordList: [],
			loadStatus: 'loadmore',
			show: true,
			status: 'loadmore',
			getguild: 0
		};
	},

	// onShow() {
	// 	this.getmeetingHallRecord();
	// },
	onLoad(option) {
		this.getguild = option.guildId;
	},
	created() {
		this.getmeetingHallRecord();
	},

	methods: {
		change(index) {
			this.current = index.index;
		},
		async getmeetingHallRecord() {
			let param = {};
			param.page = this.page;
			param.size = this.size;
			const res = await meetingHallRecord(param);
			console.log(res);
			let _this = this;
			// 使用map方法遍历 data.data.pageData 里面的数据传递给 _this.guildMemberList
			res.data.pageData.map((i) => {
				_this.meetingRecordList.push(i);
			});
			console.log(this.meetingRecordList);

			// this.meetingRecordList = res.data.pageData;
			this.totalSize = res.data.totalSize;
		},
		goGuild(item) {
			uni.navigateTo({
				url: `/pages/tiantuan/detaLis?id=${item.id}&getguild=${this.getguild}`
			});
			item.isLook = true;
		},
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.meetingRecordList.length < this.totalSize) {
				this.page++;
				//则还有下一页
				this.status = 'loadmore';
				this.getmeetingHallRecord();
			} else {
				this.page = 1;
				this.status = 'nomore';
			}
		}
	}
};
</script>

<style scoped lang="less">
page {
	background-color: #1a1a1a;
}

.conter {
	padding: 30rpx 34.88rpx;

	.box {
		width: 680rpx;
		height: 1300rpx;
		border-radius: 52rpx;
		border: 3rpx solid #2f2f2f;
		background: linear-gradient(180deg, #191919 0%, #282828 100%);

		.sfntio_box {
			display: flex;
			color: #ffffff;
			font-size: 31rpx;
			font-weight: 700;
			padding: 34.88rpx 100rpx 0 190rpx;
			justify-content: space-between;
		}

		.list_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx 0 20rpx;
			width: 631rpx;
			height: 117rpx;
			margin-top: 34.88rpx;
			margin-left: 24rpx;
			background: #1b1b1b;
			border-radius: 323rpx;
			border: 2rpx solid #ffffff;

			.name {
				color: #ffffff;
				font-size: 30rpx;
				font-weight: 400;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}

			.number {
				text-align: center;
				color: #ffffff;
				font-weight: 400;
				font-size: 30rpx;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}

			.price {
				width: 120rpx;
				text-align: center;
				color: #ffffff;
				font-weight: 400;
				font-size: 30rpx;
				font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			}
			.doudou {
				width: 17rpx;
				height: 17rpx;
				margin-top: 5rpx;
				border-radius: 50%;
				background: #eef862;
			}
		}
	}
}
</style>
